<!--货主物流总量-->
<style src="@/style/core/board.less" lang="less" scoped></style>
<template>
  <div class="contain">
    <div class="board-tab displayflex mb10">
      <dl class="flex1 board-dl cur">
        <dt class="iconfont icon-logistics-owner"></dt>
        <dd>货主物流总量</dd>
      </dl>
      <dl class="flex1 board-dl ">
        <dt class="iconfont icon-logistics-carrier"></dt>
        <dd>承运商物流总量</dd>
      </dl>
    </div>
    <div class="displayflex board-peo mb10">
      <div class="flex1 label">会员总数<em class="num"> {{items.TenantCount}} </em>名</div>
      <div class="bp-sele"><i class="iconfont icon-logistics-date"></i>按时间段</div>
      <div class="bp-sele cur"  @click="popupVisible=true"><i class="iconfont icon-salesmen"></i>传世会员</div>
    </div>
    <div class="owner-round">
      <b class="tit">{{nowdate | time}}  截止  {{nowdate | timeHurs}}</b>
      <ul>
        <li>
          <p><i class="iconfont icon-logistics-volume blue"></i>物流货量</p>
          <span>
            <template  v-for="item in wlNum">
              <i class="one blue" v-if="item == '1'"></i>
              <i class="two blue" v-if="item == '2'"></i>
              <i class="three blue" v-if="item == '3'"></i>
              <i class="four blue" v-if="item == '4'"></i>
              <i class="five blue" v-if="item == '5'"></i>
              <i class="seven blue" v-if="item == '7'"></i>
              <i class="eight blue" v-if="item == '8'"></i>
              <i class="nine blue" v-if="item == '9'"></i>
              <i class="zero blue" v-if="item == '0'"></i>
            </template>件
          </span>
        </li>
        <li>
          <p><i class="iconfont icon-delivery-num green"></i>委托单数</p>
          <span>
            <template  v-for="item in wtNum">
              <i class="one blue" v-if="item == '1'"></i>
              <i class="two blue" v-if="item == '2'"></i>
              <i class="three blue" v-if="item == '3'"></i>
              <i class="four blue" v-if="item == '4'"></i>
              <i class="five blue" v-if="item == '5'"></i>
              <i class="seven blue" v-if="item == '7'"></i>
              <i class="eight blue" v-if="item == '8'"></i>
              <i class="nine blue" v-if="item == '9'"></i>
              <i class="zero blue" v-if="item == '0'"></i>
            </template>单
          </span>
        </li>
      </ul>
      <div class="displayflex owner-dl mb10">
        <dl class="flex1">
          <dt><i class="iconfont icon-entrust-owner"></i>委托货主</dt>
          <dd><em>{{Delivery.OwnerCount}}</em>包</dd>
        </dl>
        <dl class="flex1">
          <dt><i class="iconfont icon-delivery-customer"></i>配送客户</dt>
          <dd><em>{{Delivery.CustomerCount}}</em>包</dd>
        </dl>
        <dl class="flex1">
          <dt><i class="iconfont icon-delivery-city"></i>配送城市</dt>
          <dd><em>{{Delivery.CityCount}}</em>包</dd>
        </dl>
        <dl class="flex1">
          <dt><i class="iconfont icon-delivery-address"></i>配送地址</dt>
          <dd><em>{{Delivery.AddressCount}}</em>包</dd>
        </dl>
      </div>
    </div>
    <div class="board-car mb10">
      <div class="bc-total-box">
        <ul class="displayflex bc-total line-blue">
          <li class="flex1"><i class="iconfont icon-delivery1"></i>已派</li>
          <li class="flex1">单数<em>{{BillStateInfo.SendedBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.SendedPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-blue  line-ul">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.SendedPkgQty/(BillStateInfo.SendedPkgQty+BillStateInfo.PendingPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-red">
          <li class="flex1"><i class="iconfont icon-delivery1"></i>待派</li>
          <li class="flex1">单数<em>{{BillStateInfo.PendingBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.PendingPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-red line-ul">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.SendedPkgQty/(BillStateInfo.SendedPkgQty+BillStateInfo.PendingPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-green">
          <li class="flex1"><i class="iconfont icon-arrivals"></i>到达</li>
          <li class="flex1">单数<em>{{BillStateInfo.ReachBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.ReachPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-green line-ul">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.ReachPkgQty/(BillStateInfo.ReachPkgQty+BillStateInfo.TransitPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-orange">
          <li class="flex1"><i class="iconfont icon-arrivals"></i>在途</li>
          <li class="flex1">单数<em>{{BillStateInfo.TransitBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.TransitPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-orange line-ul">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.TransitPkgQty/(BillStateInfo.ReachPkgQty+BillStateInfo.TransitPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-blue">
          <li class="flex1"><i class="iconfont icon-date"></i>期内</li>
          <li class="flex1">单数<em>{{BillStateInfo.NormalBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.NormalPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-blue line-ul">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.NormalPkgQty/(BillStateInfo.NormalPkgQty+BillStateInfo.OverTimePkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-red">
          <li class="flex1"><i class="iconfont icon-date"></i>超期</li>
          <li class="flex1">单数<em>{{BillStateInfo.OverTimeBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{BillStateInfo.OverTimePkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-red">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{BillStateInfo.OverTimePkgQty/(BillStateInfo.NormalPkgQty+BillStateInfo.OverTimePkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
      </div>
    </div>
    <div class="owner-table mb10">
      <p class="tit">{{month}}月 累计</p>
      <table>
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th>环比上月</th>
            <th>同比上年</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>物流货量</td>
            <td><b>{{MonthDeliveryinfo.PkgQty}}</b>件</td>
            <td><b>{{(MonthDeliveryinfo.PkgQty-UpMonthDeliveryinfo.PkgQty)/MonthDeliveryinfo.PkgQty * 100 | fmoney}}</b>%</td>
            <td><b>{{(MonthDeliveryinfo.PkgQty-YearMonthDeliveryinfo.PkgQty)/MonthDeliveryinfo.PkgQty * 100 | fmoney}}</b>%</td>
          </tr>
          <tr>
            <td>委托单数</td>
            <td><b>{{MonthDeliveryinfo.BillQty}}</b>张</td>
            <td><b>{{(MonthDeliveryinfo.BillQty-UpMonthDeliveryinfo.BillQty)/MonthDeliveryinfo.BillQty * 100 | fmoney}}</b>%</td>
            <td><b>{{(MonthDeliveryinfo.BillQty-YearMonthDeliveryinfo.BillQty)/MonthDeliveryinfo.BillQty * 100 | fmoney}}</b>%</td>
          </tr>
          <tr>
            <td>配送客户</td>
            <td><b>{{MonthDeliveryinfo.BRUQty}}</b>家</td>
            <td><b>{{MonthDeliveryinfo.BRUQty/(UpMonthDeliveryinfo.BRUQty+MonthDeliveryinfo.BRUQty) * 100 | fmoney}}</b>%</td>
            <td><b>{{MonthDeliveryinfo.BRUQty/(YearMonthDeliveryinfo.BRUQty+MonthDeliveryinfo.BRUQty) * 100 | fmoney}}</b>%</td>
          </tr>
          <tr>
            <td>配送城市</td>
            <td><b>{{MonthDeliveryinfo.cityCount}}</b>个</td>
            <td><b>{{MonthDeliveryinfo.cityCount/(UpMonthDeliveryinfo.cityCount+MonthDeliveryinfo.cityCount) * 100 | fmoney}}</b>%</td>
            <td><b>{{MonthDeliveryinfo.cityCount/(YearMonthDeliveryinfo.cityCount+MonthDeliveryinfo.cityCount) * 100 | fmoney}}</b>%</td>
          </tr>
          <tr>
            <td>配送地址</td>
            <td><b>{{MonthDeliveryinfo.AddressQty}}</b>个</td>
            <td><b>{{MonthDeliveryinfo.AddressQty/(UpMonthDeliveryinfo.AddressQty+MonthDeliveryinfo.AddressQty) * 100 | fmoney}}</b>%</td>
            <td><b>{{MonthDeliveryinfo.AddressQty/(YearMonthDeliveryinfo.AddressQty+MonthDeliveryinfo.AddressQty) * 100 | fmoney}}</b>%</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="owner-flowchart">
      <p class="tit">近<i>7</i>天物流  流量图</p>
      <div class="flowchart-con">
        <ul class="flowchart-tab">
          <li class="current" @click="checkTab()">折线图</li>
          <li @click="checkTab()">柱状图</li>
          <li @click="checkTab()">折线+柱状图</li>
        </ul>
        <div class="echart2" id="echart1"></div>
        <div class="echart2 op" id="echart2"></div>
        <div class="echart2 op" id="echart3"></div>
      </div>
    </div>
    <manage-footer></manage-footer>
    <!-- 传世会员 -->
    <mt-popup
      v-model="popupVisible"
      @click="popupVisible = false;"
      position="right" class="bill-popup">
      <ul class="bill-type">
        <template v-for="item in items.TenantInfo">
          <li @click="checkBill(item.Guid)">{{item.ChineseName}}</li>
        </template>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
import manageFooter from "@/components/core/footer/manage.footer.vue";
import echarts from "$static/echarts/echarts.common.min.js";
export default {
  name: "consignor",
  components: {
    manageFooter
  },
  data() {
    return {
      items: [],
      nowdate: new Date(),
      LogisticsTatol: [],
      Delivery: [],
      BillStateInfo: [],
      month: "",
      selectMonth: "",
      MonthDeliveryinfo: [],
      UpMonthDeliveryinfo: [],
      YearMonthDeliveryinfo: [],
      dateArray: [],
      flowPkgQty:[],
      flowBillQty:[],
      wlNum:'',
      wtNum:'',
      popupVisible:false,
      TenantGuid:'',
    };
  },
  created() {
      this.getdata();
    var date = new Date();
    this.month = date.getMonth() + 1;
    this.selectMonth = date.getFullYear() +''+ (date.getMonth() + 1);
    var dateTemp;
    var flag = 1;
    for (var i = 0; i < 7; i++) {
       var myDate = new Date();
      myDate.setDate(myDate.getDate() - i);
      var s = myDate.getDate();
       if (s <9) {
        s = '0'+s;
       }
      dateTemp = myDate.getMonth() + 1 + "-" + s;
      this.dateArray.push(dateTemp);
    };
    // console.log(this.dateArray);
  },
  watch: {},
  mounted() {
    this.$nextTick(function() {
      
      
    });
  },
  methods: {
    getChart() {
      var self =this;
      var myChart = echarts.init(document.getElementById("echart1"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          orient: "vertical",
          data: ["物流货量", "委托单数"],
          top: "0",
          right: "0"
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "10px",
          top: "50px",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.dateArray,
            axisLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2,
                shadowColor: "#f49595",
                shadowBlur: 0,
                shadowOffsetX: -1
              }
            },
            axisTick: { show: false },
            axisLabel: { color: "#373737" }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              color: "#373737"
            }
          }
        ],
        series: [
          {
            name: "物流货量",
            type: "line",
            //symbolOffset:['-10px',0],
            itemStyle: {
              normal: { color: "#4aa8e5" }
            },
            data: this.flowPkgQty
          },
          {
            name: "委托单数",
            //symbolOffset:['10px',0],
            type: "line",
            itemStyle: {
              normal: { color: "#7e8755" }
            },
            data: this.flowBillQty
          }
        ]
      };
      myChart.setOption(option);

      var myChart = echarts.init(document.getElementById("echart2"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          orient: "vertical",
          data: ["物流货量", "委托单数"],
          top: "0",
          right: "0"
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "10px",
          top: "50px",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.dateArray,
            axisLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2,
                shadowColor: "#f49595",
                shadowBlur: 0,
                shadowOffsetX: -1
              }
            },
            axisTick: { show: false },
            axisLabel: { color: "#373737" }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2
              }
            },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              color: "#373737"
            }
          }
        ],
        series: [
          {
            name: "物流货量",
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              normal: { color: "#00aaeb" }
            },
            data: this.flowPkgQty
          },
          {
            name: "委托单数",
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              normal: { color: "#7c884e" }
            },
            data: this.flowBillQty
          }
        ]
      };
      myChart.setOption(option);

      var myChart = echarts.init(document.getElementById("echart3"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          orient: "vertical",
          data: ["物流货量", "委托单数"],
          top: "0",
          right: "0"
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "10px",
          top: "50px",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data:  this.dateArray,
            axisLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2,
                shadowColor: "#f49595",
                shadowBlur: 0,
                shadowOffsetX: -1
              }
            },
            axisTick: { show: false },
            axisLabel: { color: "#373737" }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#d4d4d4",
                width: 2
              }
            },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              color: "#373737"
            }
          }
        ],
        series: [
          {
            name: "物流货量",
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              normal: { color: "#4aa8e5" }
            },
            data: this.flowPkgQty
          },
          {
            name: "委托单数",
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              normal: { color: "#7e8755" }
            },
            data: this.flowBillQty
          },
          {
            name: "物流货量",
            type: "line",
            itemStyle: {
              normal: { color: "#4aa8e5" }
            },
            data: this.flowPkgQty
          },
          {
            name: "委托单数",
            type: "line",
            itemStyle: {
              normal: { color: "#7e8755" }
            },
            data: this.flowBillQty
          }
        ]
      };
      myChart.setOption(option);
    },
    checkTab() {
      var chartTab = $(event.target),
        i = chartTab.index();
      // console.log(i);
      if (!chartTab.hasClass("current")) {
        $(".flowchart-tab")
          .find("li")
          .removeClass("current");
        chartTab.addClass("current");
        $(".echart2")
          .addClass("op")
          .eq(i)
          .removeClass("op");
      }
    },
    checkBill(value){
      this.popupVisible = false;
      this.TenantGuid = value;
      this.getdata();
    },
    getdata() {
      var self = this;
      var query = {
        TenantGuid: this.TenantGuid,
        SummaryMonth: this.selectMonth
      };
      this.Ajax.post("SearchOwnerlogisticsTotalApi", query).then(function(resp) {
          if (resp.IsSuccess) {
            self.items = resp.Data;
            self.LogisticsTatol = resp.Data.LogisticsTatol[0];
            self.wlNum = self.LogisticsTatol.BillQty.toString().split('');
            self.wtNum = self.LogisticsTatol.PkgQty.toString().split('');
            self.Delivery = resp.Data.Delivery[0];
            self.BillStateInfo = resp.Data.BillStateInfo[0];
            self.MonthDeliveryinfo = resp.Data.MonthDeliveryinfo[0];
            self.UpMonthDeliveryinfo = resp.Data.UpMonthDeliveryinfo[0];
            self.YearMonthDeliveryinfo = resp.Data.YearMonthDeliveryinfo[0];
            var FlowInfo =resp.Data.FlowInfo;
            self.dateArray.forEach(function(element) {
              FlowInfo.forEach(function(item) {
                  if (element == item.SummaryDay) {
                     self.flowPkgQty.push(item.PkgQty);
                     self.flowBillQty.push(item.BillQty);
                  }
              }, this);
            }, this);
            // console.log(self.flowBillQty);
            // console.log(self.flowPkgQty);
            self.getChart();
          } else {
            self.Toast({
              message: resp.ErrorMessage || "操作失败，请稍后重试"
            });
          }
        });
    }
  }
};
</script>